<template>
  <div id="circleRef" class="ring-sty"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      myChart: null,
      chartDom: null
    }
  },
  watch: {
    data(newData) {
      if (newData.length > 0) {
        const option = {
          // 定义颜色数组
          color: ['#009BF2', '#B17EE1', '#39C38F', '#F6BD16'],
          tooltip: {
            show: false
          },
          legend: {
            show: false
          },
          silent: true,//设置鼠标移入不放大
          animation: false,//关闭加载动画

          // 根据新数据设置配置项
          series: [
            {
              type: 'pie',
              radius: ['80%', '96%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              data: newData,
              // 取消鼠标移入高亮
              emphasis: {
                disabled: true,
                focus: 'none'
              }
            }
          ]
        };
        this.myChart.setOption(option);
      }
    }
  },
  mounted() {
    // 获取DOM元素，初始化Echarts图表对象，但不设置数据
    this.chartDom = document.getElementById('circleRef');
    this.myChart = echarts.init(this.chartDom);
  },
  methods: {

  }
}
</script>
<style lang="less" scoped>
.ring-sty {
  width: 100%;
  height: 100%;
}
</style>
